<template>
  <div class="draw">
    <div class="mould">
      <div class="mould-segment segment-1"><span>冷热源</span></div>
      <div class="mould-segment segment-2"><span>泵</span></div>
      <div class="mould-segment segment-3"><span>阀门</span></div>
      <div class="mould-segment segment-4"><span>热库</span></div>
      <div class="mould-segment segment-5"><span>换热器</span></div>
    </div>
    <span class="label is-vertical" style="left:427px;top:172px">管道</span>
    <span class="label" style="left:1266px;top:368px">冷热负荷</span>
    <div class="tag"
         v-for="(row, index) in dataList"
         :key="index"
         :style="{ top: row.top + 'px', left: row.left + 'px' }">
      <div v-if="row.isShowPower">
        <span class="tag-title">功率：</span>
        <span class="tag-label" :class="`is-label--${row.type}`">{{ row.power }}</span>
      </div>
      <div>
        <span class="tag-title">流量：</span>
        <span class="tag-label" :class="`is-label--${row.type}`"
        >{{ row.flow }}</span>
      </div>
      <div>
        <span class="tag-title">压力：</span>
        <span class="tag-label" :class="`is-label--${row.type}`"
        >{{ row.pressure }}</span
        >
      </div>
    </div>
  </div>
</template>
<script>
    import {hotColdPipeWorkSystemDiagram} from "@/api/scada";

    export default {
        name: "draw",
        props: {},
        data() {
            return {
                dataList: [
                    {
                        power: '0kW',
                        isShowPower: true,
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "sussess",
                        top: 42,
                        left: 58
                    },
                    {
                        power: '0kW',
                        isShowPower: true,
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "sussess",
                        top: 171,
                        left: 58
                    },
                    {
                        power: '0kW',
                        isShowPower: true,
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "sussess",
                        top: 296,
                        left: 58
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "warning",
                        top: 42,
                        left: 278
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "warning",
                        top: 171,
                        left: 278
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "warning",
                        top: 296,
                        left: 278
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "normal",
                        top: 30,
                        left: 613
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "normal",
                        top: 107,
                        left: 613
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "normal",
                        top: 183,
                        left: 613
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "normal",
                        top: 264,
                        left: 613
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "error",
                        top: 218,
                        left: 785
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "error",
                        top: 218,
                        left: 975
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "error",
                        top: 218,
                        left: 1182
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "error",
                        top: 358,
                        left: 715
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "error",
                        top: 358,
                        left: 905
                    },
                    {
                        flow: '0t/h',
                        pressure: '0kPa',
                        type: "error",
                        top: 358,
                        left: 1111
                    }
                ]
            };
        },
        computed: {},
        created() {
        },
        mounted() {
            hotColdPipeWorkSystemDiagram().then(res => {
                let data = res.result
                if(data && data.length>0) {
                    //冷源
                    let type1 = data[0].coldHostCellVOS
                    this.dataList[0].power = type1[0].power;
                    this.dataList[1].power = type1[1].power;
                    this.dataList[2].power = type1[2].power;

                    this.dataList[0].pressure = type1[0].pa;
                    this.dataList[1].pressure = type1[1].pa;
                    this.dataList[2].pressure = type1[2].pa;

                    this.dataList[0].flow = type1[0].ta;
                    this.dataList[1].flow = type1[1].ta;
                    this.dataList[2].flow = type1[2].ta;

                    //管道
                    let type2 = data[1].coldHostCellVOS

                    this.dataList[3].pressure = type2[0].pa;
                    this.dataList[4].pressure = type2[1].pa;
                    this.dataList[5].pressure = type2[2].pa;

                    this.dataList[3].flow = type2[0].ta;
                    this.dataList[4].flow = type2[1].ta;
                    this.dataList[5].flow = type2[2].ta;

                    //泵
                    let type3 = data[2].coldHostCellVOS

                    this.dataList[6].pressure = type3[0].pa;
                    this.dataList[7].pressure = type3[1].pa;
                    this.dataList[8].pressure = type3[2].pa;
                    this.dataList[9].pressure = type3[3].pa;

                    this.dataList[6].flow = type3[0].ta;
                    this.dataList[7].flow = type3[1].ta;
                    this.dataList[8].flow = type3[2].ta;
                    this.dataList[9].flow = type3[3].ta;


                    //热库
                    let type4 = data[3].coldHostCellVOS

                    this.dataList[10].pressure = type4[0].pa;
                    this.dataList[11].pressure = type4[1].pa;
                    this.dataList[12].pressure = type4[2].pa;

                    this.dataList[10].flow = type4[0].ta;
                    this.dataList[11].flow = type4[1].ta;
                    this.dataList[12].flow = type4[2].ta;

                     //换热器
                    let type5 = data[4].coldHostCellVOS

                    this.dataList[13].pressure = type5[0].pa;
                    this.dataList[14].pressure = type5[1].pa;
                    this.dataList[15].pressure = type5[2].pa;

                    this.dataList[13].flow = type5[0].ta;
                    this.dataList[14].flow = type5[1].ta;
                    this.dataList[15].flow = type5[2].ta;


                }
            });
        },
        watch: {},
        methods: {},
        components: {}
    };
</script>

<style scoped lang="scss">
  .draw {
    width: 1400px;
    height: 422px;
    background-image: url("../../../../assets/img/coldHot/17.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
  }

  .tag {
    position: absolute;
    left: 0;
    top: 0;
    background: #f7f7f7;
    padding: 10px;
  }

  .tag-title {
    color: #666;
  }

  .tag-label.is-label--sussess {
    color: #92d66e;
  }

  .tag-label.is-label--warning {
    color: #9a9aff;
  }

  .tag-label.is-label--normal {
    color: #47a4f8;
  }

  .tag-label.is-label--error {
    color: #fc807e;
  }

  .label {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
  }

  .label.is-vertical {
    width: 24px;
  }

  .mould {
    position: absolute;
    right: 0;
    top: 36px;
    font-size: 18px;
    width: 250px;
    display: flex;
    flex-wrap: wrap;
  }

  .mould-segment {
    line-height: 30px;
    padding-left: 40px;

    position: relative;
    margin-bottom: 20px;
    margin-right: 10px;
  }

  .mould-segment::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
  }

  .mould-segment::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-position: center;
    background-size: 16px;
    background-repeat: no-repeat;
  }

  .mould-segment.segment-1::before {
    background-color: #92d66e;
  }

  .mould-segment.segment-1:after {
    background-image: url("../../../../assets/img/coldHot/9.png");
  }

  .mould-segment.segment-2::before {
    background-color: #46a4f7;
  }

  .mould-segment.segment-2:after {
    background-image: url("../../../../assets/img/coldHot/3.png");
  }

  .mould-segment.segment-3::before {
    background-color: #9a9aff;
  }

  .mould-segment.segment-3:after {
    background-image: url("../../../../assets/img/coldHot/4.png");
  }

  .mould-segment.segment-4::before {
    background-color: #ff9a00;
  }

  .mould-segment.segment-4:after {
    background-image: url("../../../../assets/img/coldHot/8.png");
  }

  .mould-segment.segment-5::before {
    background-color: #fc807e;
  }

  .mould-segment.segment-5:after {
    background-image: url("../../../../assets/img/coldHot/7.png");
  }
</style>
